<template>
    <div class="basicBox" :style="{height:screenHeight+ 'px',width:screenWidth+ 'px'}">
        <a-form-model ref="basicForm" layout="inline" :model="basicForm" @cancel="()=>basicForm = {}" :rules="basicRules">
        <a-collapse :activeKey="[1,2]" v-if="isShow">
            <a-collapse-panel key="1" header = "基本信息" >
                <a slot = "extra">
                  <template v-if="!$attrs.isHide">
                    <a-button size="small" @click.stop="onEdit"  type = "primary" icon = "edit" v-show="isEditButton">修改</a-button>
                    <a-button size="small" @click.stop="onCancel" icon = "close" v-show="!isEditButton">取消</a-button>
                    <a-button size="small" @click.stop="onSave" type = "primary" icon = "check" v-show="!isEditButton">保存</a-button>
                  </template>

                </a>
                    <a-row style="display: flex">
                        <a-row style="width: 100%">
                            <a-row type="flex" justify="center">
                                <a-col :span="24">
                                    <a-form-model-item  label="企业名称" prop="companyName" style="width: 90%">
                                        <a-input v-model="basicForm.companyName"  :disabled="isDisable"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row type="flex" justify="center">
                                <a-col :span="12">
                                    <a-form-model-item  label="企业简称" prop="companyShort">
                                        <a-input v-model="basicForm.companyShort"  :disabled="isDisable"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="行政区" prop="areaId">
                                      <a-tree-select :disabled="isDisable" v-if="dataLoading1" :treeDefaultExpandAll="true" v-model="basicForm.areaId" :tree-data="treeData" :dropdownStyle="{maxHeight:'500px',overflow: 'auto'}"  :replaceFields="{title:'name',key:'id',value:'id',children:'menuList'}"  />
                                    </a-form-model-item>
                                </a-col>
                            </a-row>

                            <a-row type="flex" justify="center" >
                                <a-col :span="12">
                                    <a-form-model-item  label="法人代码">
                                        <a-input :disabled="isDisable"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item  label="法人代表">
                                        <a-input  :disabled="isDisable"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row type="flex" justify="center">
                                <a-col :span="12">
                                    <a-form-model-item  label="公司代码">
                                        <a-input v-model="basicForm.companyCode" :disabled="isDisable"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item  label="关注程度" >
                                        <a-select   :disabled="isDisable">
                                            <a-select-option :value="item" v-for="(item,index) in attention" :key="item">
                                                {{item}}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row type="flex" justify="center">
                                <a-col :span="12">
                                    <a-form-model-item  label="企业类型" prop="companyType">
                                        <a-select v-model="basicForm.companyType"   :disabled="isDisable">
                                            <a-select-option :value="item" v-for="(item,index) in companyType" :key="item">
                                                {{item}}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="统计行业" >
                                        <a-select   :disabled="isDisable">
                                            <a-select-option :value="item" v-for="(item,index) in statisticsIndustry" :key="item">
                                                {{item}}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="24">
                                    <a-form-model-item  label="企业地址"  prop="address" style="width: 90%">
                                        <a-input  v-model="basicForm.address" :disabled="isDisable"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </a-row>
                        <a-row style="width: 20%" v-if="false">
                            <div class="clearFix">
                                <a-upload
                                        action=""
                                        list-type="picture-card"
                                        :file-list="fileList">
                                    <div>
                                        <a-icon type="plus" />
                                        <div class="ant-upload-text"></div>
                                    </div>
                                </a-upload>
                            </div>
                        </a-row>
                    </a-row>

            </a-collapse-panel>
            <a-collapse-panel key="2" header = "企业信息">

                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="企业规模" >
                                <a-select   :disabled="isDisable">
                                    <a-select-option value="暂无">
                                        暂无
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="单位类别" >
                                <a-select   :disabled="isDisable">
                                    <a-select-option value="暂无">
                                        暂无
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="投产日期" >
                                <a-input  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="注册类型" >
                                <a-select   :disabled="isDisable">
                                    <a-select-option value="暂无">
                                        暂无
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="隶属关系" >
                                <a-select   :disabled="isDisable">
                                    <a-select-option value="暂无">
                                        暂无
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="流    域" >
                                <a-select   :disabled="isDisable">
                                    <a-select-option value="暂无">
                                        暂无
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="中心经度" prop="x">
                                <a-input v-model="basicForm.x" :disabled="isDisable" @focus="multiPolygon"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="中心纬度" prop="y">
                                <a-input v-model="basicForm.y" :disabled="isDisable" @focus="multiPolygon"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="行业分类" >
                                    <a-select   :disabled="isDisable">
                                        <a-select-option value="暂无">
                                           暂无
                                        </a-select-option>
                                    </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="企业开户银行" >
                                <a-input :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="银行帐号">
                                <a-input :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="企业网址">
                                <a-input :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="固废处置类型" >
                                <a-select  :disabled="isDisable">
                                    <a-select-option :value="item" v-for="(item,index) in solidWasteType" :key="item">
                                        {{item}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="30万千瓦电厂" >
                                <a-input  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="报    警" >
                                <a-checkbox   default-checked :disabled="isDisable"></a-checkbox>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

            </a-collapse-panel>
            <a-collapse-panel key="3" header = "联系方式">
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="企业环保部门">
                                <a-input  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="环保人员数">
                                <a-input :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="环保负责人" prop="contactPerson" >
                                <a-input v-model="basicForm.contactPerson"  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="办公室电话"  >
                                <a-input :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="移动电话" prop="contactPhone">
                                <a-input v-model="basicForm.contactPhone"  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="传    真" prop="fax">
                                <a-input v-model="basicForm.fax" :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="邮政编码" prop="companyPostcode">
                                <a-input v-model="basicForm.companyPostcode"  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="电子邮件"  >
                                <a-input  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">

                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="24">
                            <a-form-model-item  label="通讯地址">
                                <a-input  :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>

                    </a-row>


            </a-collapse-panel>

        </a-collapse>
        </a-form-model>
      <MapLatlng ref="MapLotlng" :latlng="{x:basicForm.x,y:basicForm.y}" @coordinateChang="coordinateChang"></MapLatlng>
    </div>
</template>

<script>
    import buttonEvent from "@/views/components/mixin/buttonEvent";
    import MapLatlng from "@/components/Map-Latlng"
    export default {
        components:{
          MapLatlng
        },
        mixins:[buttonEvent],
        name: "basicInfo",
        props: {
            company:{
                type: Object,
                required: true
            }
        },
        data(){
            return {
              dataLoading1: false,
              treeData: [], //  运维点树形下拉
                companyType:['一般排污者','小型三产','建筑施工','固体废物处理厂','畜牧养殖业','重金属单位'],
                statisticsIndustry:['化工','纺织印染','钢铁','造纸','电力','水泥','食品','电镀'],
                solidWasteType:['危险废物集中处理厂','垃圾处理厂','医疗废物集中处置厂','其他固体废物专业处置单位','非固体废物处置单位'],
                attention:['国控','省控','市控','非重点污染源'],
                isShow:false,
                labelCol:{
                    span: 8
                },
                basicForm:{
                    id:'',
                    companyId:this.company.id,
                    companyName:'',
                    companyType:'',
                    companyShort:'',
                    companyCode:'',
                    corporate:'',
                    address:'',
                    companyPostcode:'',
                    fax:'',
                    contactPerson:'',
                    contactPhone:'',
                    emissionType:'',
                    controlLevel:'',
                    areaId:'',
                    geom:'',
                    x:'',
                    y:''
                },
                basicRules:{
                    companyName: [
                        { required: true, message: '请输入监控点名称', trigger: 'blur' }
                    ],
                    companyShort: [
                        { required: true, message: '请输入监控点名称', trigger: 'blur' }
                    ],
                    companyType: [
                        { required: true, message: '请选择企业类型', trigger: 'blur' }
                    ],
                    // companyCode: [
                    //     { required: true, message: '请输入公司代码', trigger: 'blur' }
                    // ],
                    corporate: [
                        { required: true, message: '请输入法人代表', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入公司地址', trigger: 'blur' }
                    ],
                    // companyPostcode: [
                    //     { required: true, message: '请输入邮政编码', trigger: 'blur' }
                    // ],
                  areaId:[
                    { required: true, message: '请选择运维配置', trigger: 'blur' }
                  ],
                  x: [
                    { required: true, message: '请输入经度', trigger: 'blur' }
                  ],
                  y: [
                    { required: true, message: '请输入纬度', trigger: 'blur' }
                  ],

                },

                fileList:[{
                    uid: '-1',
                    name: 'image.png',
                    status: 'done',
                    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                }],
                screenHeight:document.body.clientHeight-162,
                screenWidth:document.body.clientWidth-42,
                timer:false
            }
        },

        methods:{
          // 添加弹窗经纬度框事件
          multiPolygon(e) {
            e.target.blur();
            this.$refs.MapLotlng.mapModel = true;
            this.$refs.MapLotlng.initData();
          },
          coordinateChang(data){
            this.basicForm.x = data.x;
            this.basicForm.y = data.y;
            this.basicForm.geom = data.geom;
            console.log(data)
          },
          // 数据获取方法
          getTreeData() {
            this.$api.getAllAreasList().then((res) => {
                  if (res.data.code == 0) {
                    res.data.data.forEach(v=>{
                      v.selectable = false;
                      v.menuList.forEach(item=>{
                        item.selectable = false;
                      })
                    })
                    this.treeData = res.data.data;
                    this.dataLoading1 = true;
                  } else {
                    this.$message.info(res.data.errorMessage);
                  }
                });
          },
            onCancel(){
                this.cancelDispose();
                this.$refs.basicForm.resetFields();
            },
            onSave(){
                console.log(this.$refs.basicForm)
                this.$refs.basicForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.$api.putCompanyEdit(this.basicForm).then(res=>{
                        if(res.data.code==0){
                            this.cancelDispose();
                            this.$message.success('修改完成')
                        }else{
                            this.$message.error(res.data.errorMessage)
                        }
                    })
                });
            },
            getCompanyInfo(){
                this.$api.getCompanyInfo(this.company.id).then(res=>{
                    console.log(res.data.data)
                    this.basicForm=res.data.data
                    this.$forceUpdate()
                    this.isShow=true;
                });
              this.getTreeData();
            },
        },
        mounted () {

            const that = this
            window.onresize = () => {
                return (() => {
                    that.screenHeight = document.body.clientHeight-162
                    that.screenWidth = document.body.clientWidth-42
                })()
            }

        },
        watch:{
            screenHeight:function(val){
                if(!this.timer){
                    this.screenHeight = val-162
                    this.timer = true
                    let that = this
                    setTimeout(function(){
                        that.timer = false
                    },400)
                }
            },
            screenWidth:function(val){
                if(!this.timer){
                    this.screenWidth = val-42
                    this.timer = true
                    let that = this
                    console.log(this.screenWidth)
                    this.$forceUpdate();
                    setTimeout(function(){
                        that.timer = false
                    },400)
                }
            }
        }
    }
</script>

<style scoped lang = "scss">
    @import "../../components/style/style.scss";
    .clearFix{
        margin: 20px;
        position: relative;
    }
    ::v-deep .ant-upload-list-picture-card-container {
        width: 100%;
        height: 100%;
        margin: 0
    }
    ::v-deep .ant-upload-list-picture-card .ant-upload-list-item{
        width: 100%;
        height: 100%;
        margin: 0
    }
    ::v-deep .ant-upload.ant-upload-select-picture-card{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: transparent;
    }
    .basicBox{
        overflow-y: overlay;
    }
    //.basicBox::-webkit-scrollbar {
    //    position: absolute;
    //    width : 8px;
    //    height: 10px;
    //}
    //.basicBox::-webkit-scrollbar-thumb {
    //    border-radius: 10px;
    //    box-shadow   : inset 0 0 5px #207064;
    //    background   : #207064;
    //}
    //.basicBox::-webkit-scrollbar-track {
    //    -webkit-box-shadow: inset 0 0 1px #2b4341;
    //    border-radius: 10px;
    //    background: #2b4341;
    //}
</style>
